---
title: Skeleton
description: Shows an skeleton component.
---

{/* prettier-ignore-start */}
{/* prettier-ignore-end */}

import Code from '@/components/Code.astro';
import { LinkButton } from '@/components/react/LinkButton';
import { Aside, Tabs, TabItem } from '@astrojs/starlight/components';
import importedCode from '@rnr/reusables/components/ui/skeleton?raw';

<LinkButton target="_blank" href="https://rnr-showcase.vercel.app/skeleton">
  Demo
</LinkButton>

<br />

Shows an skeleton component.

## Installation

<Tabs>
  <TabItem label='CLI'> 
    ```bash
    npx @react-native-reusables/cli@latest add skeleton
    ```
  </TabItem>
  <TabItem label='Manual'>
    **Copy/paste the following code to `~/components/ui/skeleton.tsx`**

    <Code code={importedCode} lang="tsx" title="~/components/ui/skeleton.tsx" />
  </TabItem>
</Tabs>


## Usage

```tsx
import { Skeleton } from '~/components/ui/skeleton';

function Example() {
  return (
     <Skeleton className='h-12 w-12 rounded-full' />
  );
}
```

## Props

### Skeleton

Extends [`View`](https://reactnative.dev/docs/view#props) props except for `style`.
        